<script setup lang="ts">
  /**
   * 该组件的作用是，文字超出时鼠标移入显示tooltip，移出就隐藏，不用在页面做处理
   */

  import { computed, CSSProperties, PropType, ref } from 'vue'

  const props = defineProps({
    text: {
      type: String,
      required: true,
    },
    maxWidth: {
      type: Number,
      required: true,
    },
    height: {
      type: Number,
      required: true,
    },
    tooltipContentMaxWidth: Number,
    tooltipContentMaxHeight: {
      type: Number,
      default: 200,
    },
    textAlign: {
      type: String as PropType<'left' | 'right' | 'center'>,
      default: () => 'left',
    },
    fontWeight: {
      type: String as PropType<'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600'>,
      default: () => 'normal',
    },
    fontSize: {
      type: Number,
      default: () => 12,
    },
    width: String,
    isSetWidth: {
      type: Boolean,
      default: () => true,
    },
  })

  const isTooltipDisabled = ref(true)
  const handleMouseover = (e: MouseEvent) => {
    if ((e.target as HTMLDivElement).scrollWidth > props.maxWidth) {
      isTooltipDisabled.value = false
    }
  }

  const hTooltipTextStyle = computed<CSSProperties>(() => {
    return {
      width: props.isSetWidth ? (props.width ? props.width : `${props.maxWidth}px`) : 'unset',
      maxWidth: `${props.maxWidth}px`,
      height: `${props.height}px`,
      lineHeight: `${props.height}px`,
      textAlign: props.textAlign,
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      cursor: 'pointer',
      fontWeight: props.fontWeight,
      fontSize: `${props.fontSize}px`,
    }
  })

  const tooltipContentStyle = computed<CSSProperties>(() => {
    return {
      maxWidth: `${props.tooltipContentMaxWidth || 350}px`,
      maxHeight: `${props.tooltipContentMaxHeight}px`,
      overflow: 'auto',
    }
  })
</script>

<template>
  <el-tooltip placement="top" effect="dark" :disabled="isTooltipDisabled">
    <template #content>
      <div :style="tooltipContentStyle">{{ props.text }}</div>
    </template>

    <div
      ref="gTooltipTextRef"
      class="h_tooltip_text"
      :style="hTooltipTextStyle"
      @mouseover="handleMouseover"
    >
      {{ props.text }}
    </div>
  </el-tooltip>
</template>
